<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改图书</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/add.css">
</head>

<body>

    <div class="container">
        <div class="form-inline">
            <h2 style="text-align: left; margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="40"
                    fill="#17a2b8" class="bi bi-book-half" viewBox="0 0 16 16">
                    <path
                        d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
                </svg>
                <span>修改题目</span>
            </h2>
        </div>

        <form id="updateQuestion">
            <input type="hidden" class="form-control" id="questionId" name="questionId">
            <div class="form-group">
                <label for="content">试题名称:</label>
                <input type="text" class="form-control" id="content" name="content">
            </div>
            <div class="form-group">
                <label for="grade">题目等级</label>
                <input type="text" class="form-control" id="grade" name="grade"/>
            </div>
            <div class="form-group">
                <label for="correctAnswer">正确答案</label>
                <input type="text" class="form-control" id="correctAnswer" name="correctAnswer"/>
            </div>
            <div class="form-group">
                <label for="riskScore">风险分值</label>
                <input type="number" class="form-control" id="riskScore" name="riskScore">
            </div>
            <div class="form-group">
                <label for="riskLabel">风险标签</label>
                <input type="text" id="riskLabel" class="form-control" name="riskLabel"/>
            </div>
            <div class="form-group">
                <label for="cheatType">诈骗类型</label>
                <input type="text" id="cheatType" class="form-control" name="cheatType"/>
            </div>
            <div class="form-group">
                <label for="questionType">题目类型</label>
                <select class="custom-select" id="questionType" name="questionType">
                    <option value="single" selected>单选</option>
                    <option value="multiple">多选</option>
                </select>
            </div>
            <div class="form-group">
                <label for="highRiskOption">高风险选项</label>
                <input type="text" id="highRiskOption" class="form-control" name="highRiskOption"/>
            </div>
            <div class="form-group">
                <label>选项A</label>
                <input id="optionKeyA" type="text"  class="form-control" name="options[0].optionKey"/>
                <input id="optionA" type="text"  class="form-control" name="options[0].optionContent"/>
            </div>
            <div class="form-group">
                <label>选项B</label>
                <input id="optionKeyB" type="text"  class="form-control" name="options[1].optionKey"/>
                <input id="optionB" type="text"  class="form-control" name="options[1].optionContent"/>
            </div>
            <div class="form-group">
                <label>选项C</label>
                <input id="optionKeyC" type="text"  class="form-control" name="options[2].optionKey"/>
                <input id="optionC" type="text"  class="form-control" name="options[2].optionContent"/>
            </div>
            <div class="form-group">
                <label >选项D</label>
                <input id="optionKeyD" type="text"  class="form-control" name="options[3].optionKey"/>
                <input id="optionD" type="text"  class="form-control" name="options[3].optionContent"/>
            </div>

<!--            <div class="form-group">-->
<!--                <label for="bookStatus">图书状态</label>-->
<!--                <select class="custom-select" id="bookStatus" name="status">-->
<!--                    <option value="1" selected>可借阅</option>-->
<!--                    <option value="2">不可借阅</option>-->
<!--                </select>-->
<!--            </div>-->
            <div class="form-group" style="text-align: right">
                <button type="button" class="btn btn-info btn-lg" onclick="update()">确定</button>
                <button type="button" class="btn btn-secondary btn-lg" onclick="javascript:history.back()">返回</button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        getBookInfo();
        function getBookInfo() {
            $.ajax({
                type: "get",
                url: "api/questions/queryQuestionById"+ location.search,
                success: function (result) {
                    if (result != null) {
                        var question = result;
                        $("#questionId").val(question.questionId);
                        $("#content").val(question.content);
                        $("#grade").val(question.grade);
                        $("#correctAnswer").val(question.correctAnswer);
                        $("#riskScore").val(question.riskScore);
                        $("#riskLabel").val(question.riskLabel);
                        $("#cheatType").val(question.cheatType);
                        $("#questionType").val(question.questionType);
                        $("#highRiskOption").val(question.highRiskOption);
                        question.options.forEach(option => {
                            // 根据 key 找到对应的 <td> 并赋值
                            // tmp  +='<td>'+option.optionContent+'</td>';
                            $("#optionKey" + option.optionKey).val(option.optionKey);
                            $("#option" + option.optionKey).val(option.optionContent);
                        });

                    }
                },
                error: function (error) {
                    alert("出现错误");
                    location.href = "book_list.html";
                }
            });
        }
        function update() {
            $.ajax({
                type: "post",
                url: "api/questions/updateQuestion",
                data: $("#updateQuestion").serialize(),
                success: function (result) {

                    if (result) {
                        alert("更新成功");
                        location.href = "book_list.html?currentPage=1"
                    }else {
                        alert("更新失败");
                    }
                },
                error: function (error) {
                    alert("出现错误");
                    location.href = "book_list.html";
                }
            });
        }
    </script>
</body>

</html>